/**
* Created by fish on 2019/6/11.
*
* GridBox
*/

<style>
.grid-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.1);
    overflow: auto;
    text-align: center;
}
.grid_boxInner{
    position: relative;
    width: 100%;
    height: 100%;
}
.grid-box .block-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 250px;
    height: 470px;
    padding: 10px 0;
    white-space: nowrap;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.grid-box .block-box::-webkit-scrollbar {
    display: none;
}
.grid-box .block-box .block-box-inner{
    height: 450px;
}
.grid-box  .block-item {
    float: left;
    position: relative;
    width: 800px!important;
    height: 450px!important;
    line-height: 450px;
    margin-right: 50px;
    background-color: #ffffff;
    color: #000000;
    border: 4px solid #DFDFDF;
    text-align: center;
    overflow: hidden;
}
.grid-box .block-item.block-active{
    border: 6px solid #006DFF;
}
.grid-box .block-item.block-active .active {
    display: block;
}
.grid-box .block-item .closeItem {
    position: absolute;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    right: 15px;
    bottom: 15px;
    background-position: center center;
    cursor: pointer;
}
.block-item .active {
    position: absolute;
    top: 0;
    right: 0;
    width: 62px;
    height: 62px;
    background: #006DFF;
    color: #ffffff;
    line-height: 30px;
    display: none;
}
.block-item .active  .ivu-icon {
    margin: 0;
    font-size: 60px;
}
.block-item .img {
    width: 100%;
    height: 100%;
}
.block-item .img  img {
    width: 100%;
    height: 100%;
    margin: 0;
    vertical-align: top;
}
</style>

<template>
  <div class="grid-box" v-show="isShow">
      <div class="grid_boxInner">
        <div class="block-box">
            <div class="block-box-inner" :style="'width:'+gridWidth">
                <div class="block-item block-add" @click.stop.prevent="doAddBoard"></div>
                <div v-for="(item, index) in boardList" :key="index">
                    <div 
                    :class="{ 'block-item': true, 'block-active': activeIndex === index }" 
                    @click.stop.prevent="doTrigger(index)">
                        <div class="closeItem" @click.stop.prevent="doRemoveBoard(index)"></div>
                        <div class="active"><Icon type="md-checkmark"/></div>
                        <div class="img"><img :src="item.screenshot" alt=""></div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  export default {
    name: 'GridBox',
    data () {
      return {
        isShow: false,
        activeIndex: 0,
        swiperOption:{
            slidesPerView: 3,
            spaceBetween: 10,
            freeMode: true
        }    
      }
    },
    computed: {
      ...mapGetters({
        activeBoardIndex:'draw/activeBoardIndex',
        boardList:'draw/boardList'
      }),
      gridWidth(){
          return (this.boardList.length+1)*850+'px';
      }
    },
    watch: {
      activeBoardIndex (val) {
        let _t = this
        _t.activeIndex = val
      }
    },
    methods: {
        ...mapActions({
            list_add:'draw/list_add',
            activeBoardIndex_update:'draw/activeBoardIndex_update',
            list_remove:'draw/list_remove',
            screenshot_update:'draw/screenshot_update'
        }),
      doAddBoard () {
        let _t = this
        // 更新激活项
        _t.activeIndex = _t.boardList.length
        // 分发mutation，新增画板
        _t.list_add({
            id: new Date().getTime(),
            screenshot: '',
            callback:()=>{
                _t.doClose();
            }
        })
      },
      doRemoveBoard (index) {
        let _t = this
        // 删除一项
        _t.list_remove(index);
        _t.$nextTick(function () {
            // 处理激活项
            if (_t.activeIndex >= index) {
                if (_t.activeIndex > 0) {
                    _t.activeIndex--;
                } else {
                    _t.activeIndex = 0;
                    // 广播事件
                _t.$bus.$emit('listRemove');
                }
            }
            _t.activeBoardIndex_update(_t.activeIndex);
        })
      },
      doTrigger (index) {
        let _t = this;
        _t.activeIndex = index;
        _t.doClose();
      },
      doClose () {
        let _t = this;
        _t.isShow = false;
        _t.activeBoardIndex_update(_t.activeIndex);
        _t.$emit('close');
      },
      doShow (data) {
        let _t = this;
        _t.isShow = true;
        _t.screenshot_update({
            index: _t.activeIndex || 0,
            screenshot: data
        })
      },
      doHide () {
        let _t = this;
        _t.isShow = false;
      }
    }
  }
</script>
